<template>
  <div class='container' ref="container">
    <!-- $router.back()是返回之前的路由 -->
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="detail" v-if="article">
      <h3 class="title">{{article.title}}</h3>
      <div class="author">
        <!-- 动态获取文章作者的头像 -->
        <van-image round width="1rem" height="1rem" fit="fill" :src="article.aut_photo" />
        <div class="text">
          <p class="name">{{article.aut_name}}</p>
          <p class="time">{{article.pubdate|formatTime}}</p>
        </div>
        <van-button @click='toggleFocus' round size="small" type="info">
          <!-- 关注功能 三元表达 来判断 是否已经关注 -->
          {{article.is_followed?'已关注':'+ 关注'}}
        </van-button>
      </div>
      <!-- 文章内容 -->
      <div class="content" v-html="article.content"></div>
      <div class="zan">
        <!-- 点赞功能 不喜欢有三个状态位 是共用的 1是点赞 0是不喜欢 -1是没操作(不用写) -->
        <!-- @click 设置点击事件 用来判断点击的是哪个按钮(并不是传递参数 判断是否点赞参数是服务器返回的值) -->
        <!-- 点赞 不喜欢是互斥功能 当点击喜欢时候 :class 动态类名绑定给 点赞功能 让其点亮 -->
        <van-button @click="toggleStatus(0)" round size="small" :class="{active:article.attitude===1}" plain icon="like-o">点赞</van-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- :class动态添加类名 如果状态位是0的时候 显示不喜欢的样式 -->
        <!-- @click 设置点击事件 用来判断点击的是哪个按钮 -->
        <!-- 点赞 不喜欢是互斥功能 当点击不喜欢的时候 :class 动态类名绑定给 不喜欢功能 让其点亮 -->
        <van-button @click="toggleStatus(1)" round size="small" :class="{active:article.attitude===0}" plain icon="delete">不喜欢</van-button>
      </div>
    </div>
    <!-- 设置评论的组件 给子组件传此文章的id值 -->
    <!-- 需要进行判断 因为article初始值为null 当获取到服务器返回的数据时候 才会有内容 所以需要判断 如果为空(false)不显示此功能-->
    <ArticleComment v-if="article" :articleId="article.art_id.toString()"></ArticleComment>
  </div>
</template>
<script>
// 导入评论组件
import ArticleComment from '../../components/ArticleComment.vue'
//! 导入api接口组件
import { getDetailById, unFollowArticle, followArticle, likes, unlikes, undislikes, dislikes } from '../../api/search'
export default {
  name: 'Detail',
  data () {
    return {
      // ~ 接收服务器返回的数据(设置为空对象null) 服务器返回多个数据通常需要用对象储存
      article: null
    }
  },
  components: {
    // 导入评论组件
    ArticleComment
  },
  created () {
    // ? 生命周期 让页面打开时候 进行此方法 获取服务器返回的数据
    this.getDetailById()
  },
  methods: {
    //! 实现点赞效果(4种操作：点赞和取消点赞，不喜欢和取消不喜欢)
    //! 需要判断 是哪个按钮触发 接收template模板传来的点击参数 来分辨是哪个按钮
    async toggleStatus (type) {
      //! 0 是点赞按钮(template模板设置) -------------------
      if (type === 0) {
        //! 点击了点赞按钮：点赞/取消点赞
        if (this.article.attitude === 1) { //! 状态为是1的话 说明已经点赞了 再次点击按钮取消赞的状态位
          try {
            //! 把取消点赞的状态位 上传到服务器上
            await unlikes(this.article.art_id.toString())
            //! 在页面上取消点赞状态位
            this.article.attitude = -1 //! -1是不点赞的状态位
          } catch (error) {
            //! 如果不成功设置提醒 提示用户(Vant轻提示组件)
            this.$toast('取消点赞失败')
          }
        } else { //! 否则 不等于1就是说明没点赞 再次点击按钮设置点赞状态位
          try {
            //! 把点赞的状态位 上传到服务器上
            await likes(this.article.art_id.toString())
            //! 在页面上设置点赞状态位
            this.article.attitude = 1 //! 1是点赞的状态位
          } catch (error) {
            //! 如果不成功设置提醒
            this.$toast('点赞失败')
          }
        }
      }
      //! 1 是不喜欢按钮(template模板设置) -----------------
      if (type === 1) {
        //! 点击了不喜欢按钮：不喜欢/取消不喜欢
        if (this.article.attitude === 0) { //! 状态位是0的话 说明已经不喜欢了 再次点击按钮取取消不喜欢状态位
          try {
            //! 把取消不喜欢的状态位 上传到服务器上
            await undislikes(this.article.art_id.toString())
            //! 在页面上取消不喜欢的状态位
            this.article.attitude = -1 //! -1取消不喜欢额状态位
          } catch (error) {
            //! 如果不成功设置提醒
            this.$toast('取消不喜欢失败')
          }
        } else { //! 否则 不等于0就是说明 没有设置不喜欢 再次点击按钮设置不喜欢状态位
          try {
            //! 把不喜欢的状态位 上传到服务器上
            await dislikes(this.article.art_id.toString())
            //! 在页面上设置不喜欢状态位
            this.article.attitude = 0
          } catch (error) {
            //! 如果不成功设置提醒
            this.$toast('取消不喜欢失败')
          }
        }
      }
    },
    // ? 获取文章详情数据
    async getDetailById () {
      // ? 通过编程式导航(动态路由) 传来的数据 和服务器进行比对 获取相应的文章数据
      const ret = await getDetailById(this.$route.query.id)
      // ? 把获取的数据储存到页面上
      this.article = ret.data
    },
    // ~ 关注或者取消关注文章的操作
    async toggleFocus () {
      // ~ 判断用户是否关注了内容
      if (this.article.is_followed) {
        // ~ 如果用户关注了该用户 此时点击后让关注按钮(is_followed)变为false 取消其关注
        try {
          // ~ 获取服务器 返回关注的状态位
          await unFollowArticle(this.article.aut_id)
          // ~ 设置下次点击后 让其取消关注(已经关注的操作)
          // ~ 关注的状态位 已经储存到了data()里的对象中
          this.article.is_followed = !this.article.is_followed // 也可以固定为false
        } catch (error) {
          // ~ 未知原因没有成功取消关注 提示用户(Vant轻提示组件)
          this.$toast('取消关注失败')
        }
      } else {
        // ~ 如果用户没有关注 此时点击后让关注按钮(is_followed)变为true 进行关注
        try {
          // ~ 获取服务器 返回关注的状态位
          await followArticle(this.article.aut_id)
          // ~ 设置下次点击后 让其关注(没有关注的操作)
          // ~ 关注的状态位 已经储存到了data()里的对象中
          this.article.is_followed = !this.article.is_followed // 也可以固定为true
        } catch (error) {
          // ~ 未知原因没有成功关注 提示用户(Vant轻提示组件)
          this.$toast('关注失败')
        }
      }
    }
  }
}
</script>
<style scoped lang='less'>
.container {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.detail {
  padding: 92px 20px 88px;
  // height: 1000%;
  .title {
    font-size: 36px;
    line-height: 2;
  }
  .zan {
    text-align: center;
    padding: 20px 0;
    .active {
      border-color: red;
      color: red;
    }
  }
  .author {
    padding: 20px 0;
    display: flex;
    .text {
      flex: 1;
      padding-left: 20px;
      line-height: 1.5;
      .name {
        font-size: 28px;
        margin: 0;
      }
      .time {
        margin: 0;
        font-size: 24px;
        color: #999;
      }
    }
  }
  .content {
    padding: 40px 0;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
    /deep/ img {
      max-width: 100%;
      background: #f9f9f9;
    }
    /deep/ code {
      white-space: pre-wrap;
    }
    /deep/ pre {
      white-space: pre-wrap;
    }
  }
}
</style>
